<template>
  <div class="mod-sys__menu">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step
        v-for="(item, index) of stepTitle"
        :key="index"
        :title="item"
        :class="stepClassObj(index)"
      />
    </el-steps>
    <div v-show="active == 0">我是第一步显示的内容</div>
    <div v-show="active == 1">我是第二步显示的内容</div>
    <div v-show="active == 2">我是第三步完成后的内容</div>
    <div v-show="active == 3">我是第四步完成后的内容</div>
    <div v-show="active == 4">我是第五步完成后的内容</div>

    <el-button type="primary" @click="stepSubmitHandle()" v-show="active < 5">
      {{ active == 4 ? "完成" : "下一步" }}</el-button
    >
  </div>
</template>
 
<script setup>
import { ref, reactive, toRefs, computed } from "vue";
// 状态管理 pina  composition API模式
import { useCounterStore } from "@/stores/counter.js";
// composition API模式
const counterStore = useCounterStore();
counterStore.footerTitle = reactive({
  one: "尽己力，听天命。无愧于心，不惑于情。顺势而为，随遇而安。知错就改，迷途知返。在喜欢自己的人身上用力，在不喜欢自己的人身上健忘。如此一生，甚好。 ",
  tow: " ",
});

const active = ref(0);
const stepData = reactive({
  stepSuc: [0],
  stepTitle: ["第一步", "第二步", "第三步", "第四步", "第五步"],
});
let stepClassObj = computed((val) => {
  return (val) => {
    return {
      stepSuc: stepData.stepSuc.includes(val),
      stepErr: !stepData.stepSuc.includes(val),
    };
  };
});
const { stepTitle, stepSuc } = toRefs(stepData);
const stepSubmitHandle = () => {
  if (++active.value > 5) {
    active.value = 5;
  }
  // ++active.value;
};
</script>
<style>
.stepSuc:hover {
  cursor: pointer;
}

.stepErr:hover {
  cursor: not-allowed;
}

.step_success {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
</style>